<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<script src="../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			
			.mui-content {
				height: 100%;
				overflow: auto;
			}
			
			#compile {
				color: #fff;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				line-height: 0.4rem;
			}
			
			li img {
				width: 24px;
				height: 24px;
				position: absolute;
				right: 15px;
				/*vertical-align: middle;*/
				/*top: 0.2rem;*/
			}
			
			.dui-active {
				background: #ccc;
			}
			
			.jubao-neirong {
				margin-top: 0.2rem;
			}
			
			textarea {
				border: 0;
				height: 3rem;
				/*font-size: 0.28rem;*/
			}
			
			.cover {
				position: absolute;
				top: -0.78rem;
				left: 0;
				width: 100%;
				height: 100%;
				background: #323232;
				padding: 0 0.3rem;
				opacity: 0.7;
			}
			
			.success {
				position: fixed;
				top: 40%;
				left: 10%;
				width: 80%;
				height: 2.4rem;
				background: #fff;
				text-align: center;
				padding: 0 0.3rem;
			}
			
			.suc-suc {
				height: 0.4rem;
				line-height: 0.4rem;
				color: #000;
				margin-top: 0.1rem;
				font-size: 0.30rem;
				font-weight: 700;
				color: green;
				margin: 0;
				margin-top: 0.2rem;
			}
			
			.thank {
				height: 0.7rem;
				font-size: 0.28rem;
				margin: 0.15rem 0;
				height: 0.7rem;
				box-sizing: border-box;
				line-height: 0.5rem;
			}
			
			button {
				height: 0.8rem;
				border: 0;
				color: red;
				font-size: 0.24rem;
			}
			
			.mui-table-view-cell {
				font-size: 0.375rem;
				padding: 0.34375rem 0.46875rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">举报</h1>
			<a class="mui-icon  mui-pull-right" id="compile">提交</a>
		</header>
		<div class="mui-content">
			<div class="list mui-table-view">
				<li class="mui-table-view-cell">酒托、饭托<img src="../../img/page/Hei_dui6.png" alt="" /></li>
				<li class="mui-table-view-cell">骚扰（垃圾信息、广告）<img src="../../img/page/Hei_dui6.png" alt="" /></li>
				<li class="mui-table-view-cell">诈骗信息<img src="../../img/page/Hei_dui6.png" alt="" /></li>
				<li class="mui-table-view-cell">色情、暴力信息<img src="../../img/page/Hei_dui6.png" alt="" /></li>
				<li class="mui-table-view-cell">形象差异极大（性别不符）<img src="../../img/page/Hei_dui6.png" alt="" /></li>
			</div>
			<div class="jubao-neirong">
				<textarea name="" rows="" cols="" placeholder="详细描述被举报人的恶意行为"></textarea>
			</div>
			<div class="cover" style="display:none;">

			</div>
			<div class="success" id="success" style="display: none;">
				<p class="suc-suc">举报成功</p>
				<p class="thank">感谢您的举报，我们会认真处理您的举报内容，谢谢您的合作</p>
				<button id="know">知道了</button>
			</div>
		</div>
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				var Liitems = document.getElementsByTagName('li');
				var cover = document.getElementsByClassName('cover')[0];
				var Textarea = document.getElementsByTagName('textarea')[0];
				var success = document.getElementById('success');
				plus.webview.currentWebview().setStyle({
					softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度
				});
				for(var i = 0; i < Liitems.length; i++) {
					Liitems[i].addEventListener('tap', function(e) {
						e = e || e.stopPropagation();
						for(var j = 0; j < Liitems.length; j++) {
							if(Liitems[j].lastChild.getAttribute('src') == '../../img/page/Hei_dui5.png') {
								Liitems[j].lastChild.setAttribute('src', '../../img/page/Hei_dui6.png');
							}
						}
						this.lastChild.setAttribute('src', '../../img/page/Hei_dui5.png');
					})
				}
				document.getElementById("compile").addEventListener('tap', function(e) {
					e.stopPropagation();
					var num = 0;
					for(var i = 0; i < Liitems.length; i++) {
						if(Liitems[i].lastChild.getAttribute('src') == '../../img/page/Hei_dui5.png') {
							plus.nativeUI.showWaiting('提交中')
							setTimeout(function() {
								mui.toast('举报成功，我们会尽快做出处理！')
								plus.nativeUI.closeWaiting()
								num = 0;
								mui.back()
							}, 1000)

						} else if(Liitems[i].lastChild.getAttribute('src') != '../../img/page/Hei_dui5.png') {
							num++
							if(num == 5 && Textarea.value.length == 0) {
								mui.toast('请填写举报内容');
							}
						}

					}
					//					if(Textarea.value.length != 0) {
					//						cover.style.display = 'block';
					//						success.style.display = 'block';
					//					}

				});
				document.getElementById("know").addEventListener('tap', function(e) {
					e.stopPropagation()
					cover.style.display = 'none';
					success.style.display = 'none';
					Textarea.style.pointerEvents = 'none';
					setTimeout(function() {
						Textarea.style.pointerEvents = 'auto';
					}, 500)
				});
			})
		</script>
	</body>

</html>